<template>
  <div class="author-base-info-wrapper">
    <img :src="authorAvatarUrl" :alt="authorName" @click="gotoAuthor" />

    <div class="name-sign">
      <h2 class="name">{{ author.name }}</h2>
      <h3 class="sign">
        {{ author.sign || '这里什么也没有，这是个神秘的人~' }}
      </h3>
    </div>

    <button class="follow" @click="follow" :style="buttonSty">
      {{ ifFollowSign }}
    </button>
  </div>
</template>

<script lang="ts" setup>
import config from '@/config'
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const props = defineProps<{
  author: App.Author
}>()
const emit = defineEmits<{
  (e: 'follow'): void
}>()

const authorName = ref('')

let ifFollowSign = computed(() => {
  return props.author.isFollow ? '已关注' : '关注'
})

const buttonSty = computed(() => {
  if (props.author.isFollow)
    return {
      color: 'var(--blue)',
      border: '1px solid var(--lightBlue)',
    }
})

const authorAvatarUrl = computed(() => {
  return props.author.avatar
    ? config.baseURL + props.author.avatar
    : config.baseURL + config.defaultAssetUrls.avatar
})

function follow() {
  emit('follow')
}

const router = useRouter()
function gotoAuthor() {
  router.push({
    path: `/author/${props.author.id}/profile/article`,
  })
}
</script>

<style lang="scss" scoped>
$w: var(--authorBaseInfoWidth);
$h: var(--authorBaseInfoHeight);
$ih: calc($h * 2 / 3);

.author-base-info-wrapper {
  box-sizing: border-box;
  background-color: white;
  width: $w;
  height: $h;
  display: flex;
  align-items: center;

  img,
  .name-sign {
    float: left;
    height: $ih;
  }

  img {
    margin-left: 5%;
    width: $ih;
    border-radius: 50%;

    &:hover {
      cursor: pointer;
    }
  }

  .name-sign {
    margin-left: calc($w * 0.04);

    h2 {
      font-size: calc($h * 0.2);
      line-height: 2;
    }

    h3 {
      font-size: calc($h * 0.12);
      line-height: 1.5;
    }
  }

  .follow {
    position: absolute;
    right: calc($h * 0.2);
    top: 50%;
    transform: translateY(-50%);

    --h: calc($h * 0.3);
    height: var(--h);
    width: calc($w * 0.1);
    border-radius: calc(var(--h) * 0.2);
    text-align: center;
    line-height: var(--h);
    font-size: calc($h * 0.13);

    border: 1px solid var(--gray);
    color: var(--dark);

    &:hover {
      color: var(--blue);
      border: 1px solid var(--lightBlue);
    }
  }
}
</style>
